<template>
  <KeepAlive>
    <component ref="dataBox" :is="boxName" class="item-box">
      <div class="item-title" v-if="title !== ''">
        <div class="left"></div>
        <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
        <div class="right"></div>
      </div>
      <div :class="title !== '' ? 'item-title-content' : 'item-title-content-def'">
        <slot></slot>
      </div>
    </component>
  </KeepAlive>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String ,
    default: '',
  },
  boxName: {
    type: String ,
    default: 'dv-border-box13'
  }
})
</script>

<style scoped lang="scss">
$item-title-height: 38px;
$item-title-content-height: calc(100% - 38px);

.item-box {
  box-sizing: border-box;

  :deep(.border-box-content)  {
    box-sizing: border-box;
    padding: 6px 16px 0;
  }

  .item-title {
    height: $item-title-height;
    line-height: $item-title-height;
    width: 100%;
    color: #31abe3;
    text-align: center;
    // background: linear-gradient(to right, transparent, #0f0756, transparent);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .left,
    .right {
      width: 58px;
      height: 14px;
      background-image: url("@/assets/img/titles/zuo.png");
    }

    .right {
      transform: rotate(180deg);
    }
    .title-inner {
      user-select: none;
      font-weight: 900;
      letter-spacing: 2px;
      background: linear-gradient(
              92deg,
              #0072ff 0%,
              #00eaff 48.8525390625%,
              #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .item-title-content {
    height: $item-title-content-height;
  }

  .item-title-content-def {
    width: 100%;
    height: 100%;
  }
}

</style>